import React, { useEffect, useState } from 'react';
import { Space, Table, Button, Switch, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { DelGroup, GetUserGourp } from '@/apis/user';
import AddUserGroup from '@/components/addUserGroup';
import UpdateUserGroup from '@/components/updateUserGroup'
type Props = {}
// 表格约束
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

const Group = (props: Props) => {
    const [list, setList] = useState([])
    const [visiable, setVisiable] = useState(false)
    const [update, setUpdate] = useState(false)
    const [item, setItem] = useState({})

    useEffect(() => { getAll() }, [])

    // 表格格式
    const columns: ColumnsType<DataType> = [
        { title: 'ID', dataIndex: '_id' },
        { title: '分组名称', dataIndex: 'name' },
        {
            title: '操作', dataIndex: '',
            render: (text) => (
                <Space>
                    <a onClick={() => { toUpdate(text) }}>修改</a>
                    <a onClick={() => { del(text._id) }} >删除</a>
                </Space>)
        },
    ];
    // 初始数据
    const getAll = async () => {
        const res: any = await GetUserGourp()
        setList(res.data)
    }
    // 模态框
    const close = (state: boolean) => {
        setVisiable(state)
        setUpdate(state)
        getAll()
    }
    // 修改
    const toUpdate = (text: any) => {
        setItem(text)
        setUpdate(true)
    }
    // 删除
    const del = async (_id: string) => {
        const res = await DelGroup({ _id })
        console.log(res);
        getAll()

    }

    return (
        <>
            <Button type='primary' onClick={() => setVisiable(true)}>+ 添加分组</Button>
            <Table columns={columns} dataSource={list} rowKey='_id' />
            <AddUserGroup visiable={visiable} close={close} />
            <UpdateUserGroup visiable={update} close={close} item={item} />
        </>
    )
}

export default Group